<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="../node_modules/animate.css/animate.css">
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="../public/css/login.css">


    <style type="text/css">
    	.myactive {
           color: pink
    	}
    </style>
</head>

<body>
    <!-- <div id="app">
        <a href="" @click.prevent="comname='login' ">登陆</a>
        <a href="" @click.prevent="comname='register'">注册</a>
        <transition  mode='out-in' 
        enter-active-class="animated slideInUp"
        leave-active-class="animated slideOutDown"
        :duration="{enter:800,leave:500}"
        >
            <component :is='comname'></component>
        </transition>
    </div>
    <template id='login'>
        <h1>登陆组件</h1>
    </template>
    <template id='register'>
        <h1>注册组件</h1>
    </template>
    <script>
    Vue.component('login', {
        template: '#login',
        data: function() {
            return {

            }
        }
    })
    
       var register = {
       	 template: '#register'
       } 
    
    


    var vm = new Vue({
        el: "#app",
        data: {
            comname: 'login'
        },
        methods: {

        },
        components:{
        	register:register
        }
    })
    </script> -->


   <div id="app">
   	   <router-link to="/login/ldp/123" tag="span">登陆</router-link>
   	   <router-link to="/register">注册</router-link>

       <transition mode="out-in" 
        enter-active-class="animated slideInUp"
        leave-active-class="animated slideOutDown"
        :duration="{enter:1100,leave:500}"
       >
       	
   	    <router-view></router-view>

       </transition>
   </div>
   <template id="tpl">
    <div>
      {{logincomponent}}
    </div>
      
    </template>

   <script >
   	var login = {
   		template:'#tpl',
   		created(){
   		   console.log(this.$route.params)

   		
   		}
   		
   	}
   	var register = {
   		template:'<h1>注册组件</h1>'

   	}
   	var error = {
   		template:'<h1>error组件</h1>'

   	}
    var routes = [
     {path:'/',redirect:'/login'},
     {path:'/login/:username/:password',component:login},
     {path:'/register',component:register}

    ]
   	var router = new VueRouter({
   		routes:routes,
   		linkActiveClass: 'myactive'
   	})
   	var vm = new Vue({
       el:"#app",
       data:{

       },
       router:router

    })
   </script>
    


</body>

</html>